<!--  -->
<template>
	<div class='user-select__container'>
		<combo-input :data.sync="selectData" :displayProp="{label:'name',value:'userId'}" v-bind="$attrs" clearable :placeholder="placeholder" @click.native="handleClick" @remove="handleRemoveSelectionItem"></combo-input>
		<user-picker v-if="showUserPicker" :open.sync="showUserPicker" v-model="selectData" :multi="multi" @select-complete="handleSelectComplete" />
	</div>
</template>

<script>
import ComboInput from "../ComboInput";
import UserPicker from "../UserPicker";
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {
		ComboInput,
		UserPicker
	},
	props:{
		value: {
			type: String,
			default: ""
		},
		placeholder: {
			type: String,
			default: "请选择"
		},
		multi: {
			type: Boolean,
			default: false
		},
	},
	data() {
		//这里存放数据
		return {
			selectData: [],
			showUserPicker:false
		};
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		
	},
	//方法集合
	methods: {
		handleClick(){
			this.showUserPicker = true
		},
		handleRemoveSelectionItem(){
			this.$emit("input","")
		},
		handleSelectComplete(val){
			console.log("选择用户====>",val)
			this.selectData = val
			this.$emit("input",val[0].userId)
			this.$emit("select",val[0].userId)
		}
	},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.user-select__container{
	::v-deep .combobox{
		border-radius: 0;
		border-radius: 0;
		padding: 0;
		margin-top:1px;
		width:200px;
		background-color: #fff;
		.select-selection__rendered{
			line-height: 30px;
		}
		.select-list__wrapper li{
			height: 28px;
			line-height: 26px;
		}
	}
}
</style>